<template>
  <a-layout class="wrapper">
    <a-layout-sider width="124" style="background: #fff">
      <a-menu
        v-model:selectedKeys="selectedKeys2"
        v-model:openKeys="openKeys"
        mode="inline"
        :style="{ height: '100%', borderRight: 0 }"
        class="custom-menu"
      >
        <!-- 使用 v-for 动态生成菜单项 -->
        <a-menu-item v-for="item in dataList" :key="item.dictionaryId" class="custom-menu-item">
          <router-link
            :to="{ name: 'itemList', query: { dictionaryId: item.dictionaryId, dictionaryName: item.dictionaryName } }"
          >
            {{ item.dictionaryName }}
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content class="content"><router-view /></a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const selectedKeys2 = ref(['sub0']);
const openKeys = ref([]);
import dictionaryManage from '@/api/dictionary';
const dataList = ref([]); // 定义 dataList

// 在组件挂载时获取数据字典列表
onMounted(async () => {
  try {
    const res = await dictionaryManage.getDictionaryList();
    dataList.value = res.data.data || [];
    console.log(res.data.data);

    console.log(dataList.value);
  } catch (error) {
    console.error('获取数据字典列表失败:', error);
  }
});

// 在组件挂载时设置默认选中的菜单项
onMounted(() => {
  if (dataList.value.length > 0) {
    selectedKeys.value = [dataList.value[0].dictionaryId]; // 默认选择第一个
    router.push({ path: '/base-manage/dictionary-manage/navList/index' });
  }
});

//
// const router = useRouter();
// 获取数据字典列表
onMounted(async () => {
  const router = useRouter();
  try {
    const res = await dictionaryManage.getDictionaryList();
    dataList.value = res.data.data || [];

    if (dataList.value.length > 0) {
      // 默认选择第一个菜单项
      selectedKeys2.value = [dataList.value[0].dictionaryId];
      openKeys.value = ['sub1']; // 如果有子菜单，确保它展开
      // 路由跳转到第一个字典的列表
      router.push({
        name: 'itemList',
        query: { dictionaryId: dataList.value[0].dictionaryId, dictionaryName: dataList.value[0].dictionaryName },
      });
    }
  } catch (error) {
    console.error('获取数据字典列表失败:', error);
  }
});
</script>

<style scoped>
.wrapper {
  height: 100vh; /* 使布局高度占满整个视口 */
  overflow: hidden; /* 防止内容溢出 */
}

.custom-menu {
  color: #000; /* 白色文字 */
}

.custom-menu-item {
  margin: 8px 0; /* 添加菜单项间距 */
  border-radius: 4px; /* 圆角边框 */
}

.custom-menu-item:hover {
  background-color: #1890ff; /* 鼠标悬停时的背景颜色 */
}

.custom-menu-item a {
  color: inherit; /* 继承菜单项的颜色 */
  text-decoration: none; /* 去除下划线 */
  display: block; /* 使链接占满整个菜单项 */
  padding: 10px 16px; /* 添加内边距 */
}

.content {
  margin: 16px; /* 内容区域外边距 */
  padding: 24px; /* 内容区域内边距 */
  background-color: #fff; /* 内容区域背景颜色 */
  border-radius: 4px; /* 内容区域圆角边框 */
}
</style>

<!-- // 监听 selectedKeys2 的变化
// watchEffect(() => {
//   if (selectedKeys2.value.length > 0) {
//     const selectedKey = selectedKeys2.value[0];
//     const selectedItem = dataList.value.find((item) => item.dictionaryId === selectedKey);

//     if (selectedItem) {
//       // 路由跳转，传递参数
//       router.push({
//         name: 'itemList',
//         query: { dictionaryId: selectedItem.dictionaryId, dictionaryName: selectedItem.dictionaryName },
//       });
//     }
//   }
// }); -->
